<template>
	<view class="page">

		<view class="upload">
			<u-upload :fileList="fileList" multiple :maxCount="9" :maxSize="10 * 1024 * 1024" @afterRead="afterRead"
				@delete="deletePic" @oversize="overSize">
				<image class="upload-image"
					src="https://i.ringzle.com/file/20240103/2ebf9122bf7944268e9c7fa347c6d453.png" mode="aspectFill">
				</image>
			</u-upload>
		</view>
		<view class="title">
			<input type="text" @blur="titles" class="input" v-model="dto.title" maxlength='20' placeholder="填写标题" />
		</view>
		<view class="text-text">
			<piaoyiEditor   @changes="saveContens" :maxlength="99999" :readOnly="false" />
		</view>
		<view class="hander-one">
			<!-- <view class="title"> 酒店类型 </view> -->
			<view class="text" style="display: flex">
				<view class="u-page__tag-item" v-for="(item, index) in typeList" :key="index">
					<view
						style="margin-right: 10rpx; background-color: #F5F8FA;font-size: 24rpx ; color: #333333; font-weight: Regular; padding: 8rpx 32rpx; border-radius: 50rpx;"
						@click="radioType(item, index)" :class="typeIndex==index?'active':''">
						{{item.name}}
					</view>
				</view>
			</view>
		</view>
		<view class="agree">
			<image src="@/static/index/steamerTicket/icon_not_selected.png" v-if="!agree" @tap="agree=!agree">
			</image>
			<image src="https://i.ringzle.com/file/20240227/613622c5c2b3447e89c1e3cd3cbd52a6.png" v-else
				@tap="agree=!agree">
			</image>
			<text>同意</text>
			<text @tap="showXy">《旅游攻略发布小贴士》</text>
		</view>
		<!-- 发布规则 -->
		<view class="ydxy">
			<u-modal :show="showAgree" :title="title" confirmText='已知晓' confirmColor='#007A69' @confirm="confirm">
				<view class="slot-content">
					<rich-text :nodes="content"></rich-text>
				</view>
			</u-modal>
		</view>
		<view class="btn">
			<view class="btn-left" @click="del">
				取消
			</view>
			<view class="btn-right" @click="save">
				发布
			</view>
		</view>
		<!-- 授权手机登录 -->
		<GetPhoneNumber ref="phoneNumber" @loginSuccess="loginSuccess"></GetPhoneNumber>
	</view>

</template>

<script>
	import GetPhoneNumber from '@/compoments/Getphonenumber/index.vue';
	import piaoyiEditor from '@/components/piaoyi-editor/components/piaoyi-editor/piaoyi-editor.vue';
	export default {
		components: {
			GetPhoneNumber,
			piaoyiEditor
		},
		data() {
			return {
				fileList: [],
				value1: '',
				value: '',
				codeImg: [],
				agree: false,
				picList: [],
				// 发布攻略
				dto: {
					pic: '', //	图片
					publisherType: 5, //发布者类型 5攻略（官方） 
					title: '', //	标题
					content: '', //	攻略内容,
					// latitude: '',
					// longitude: '',
					realName: '',
					userId: '',
					object: [],
					type: 99
				},
				title: '旅游攻略发布小贴士',
				content: `
					<div class="Section0" style="layout-grid:15.6000pt;"><p class="MsoNormal" align="justify" style="text-align:justify;text-justify:inter-ideograph;"><span style="mso-spacerun:'yes';font-family:Calibri;mso-fareast-font-family:宋体;
					mso-bidi-font-family:'Times New Roman';font-size:10.5000pt;mso-font-kerning:1.0000pt;"><font face="宋体">平台鼓励真实客观的原创笔记；含以下内容的笔记将不会被推荐</font>:</span><span style="mso-spacerun:'yes';font-family:Calibri;mso-fareast-font-family:宋体;
					mso-bidi-font-family:'Times New Roman';font-size:10.5000pt;mso-font-kerning:1.0000pt;"><o:p></o:p></span></p><p class="MsoNormal" align="justify" style="text-align:justify;text-justify:inter-ideograph;"><span style="mso-spacerun:'yes';font-family:Calibri;mso-fareast-font-family:宋体;
					mso-bidi-font-family:'Times New Roman';font-size:10.5000pt;mso-font-kerning:1.0000pt;">1.<font face="宋体">有违法律法规、公序良俗的内容</font><font face="Calibri">;</font></span><span style="mso-spacerun:'yes';font-family:Calibri;mso-fareast-font-family:宋体;
					mso-bidi-font-family:'Times New Roman';font-size:10.5000pt;mso-font-kerning:1.0000pt;"><o:p></o:p></span></p><p class="MsoNormal" align="justify" style="text-align:justify;text-justify:inter-ideograph;"><span style="mso-spacerun:'yes';font-family:Calibri;mso-fareast-font-family:宋体;
					mso-bidi-font-family:'Times New Roman';font-size:10.5000pt;mso-font-kerning:1.0000pt;">2.<font face="宋体">含有网址链接、微信号、手机号</font><font face="Calibri">QQ</font><font face="宋体">号、二维码</font><font face="Calibri">;</font></span><span style="mso-spacerun:'yes';font-family:Calibri;mso-fareast-font-family:宋体;
					mso-bidi-font-family:'Times New Roman';font-size:10.5000pt;mso-font-kerning:1.0000pt;"><o:p></o:p></span></p><p class="MsoNormal" align="justify" style="text-align:justify;text-justify:inter-ideograph;"><span style="mso-spacerun:'yes';font-family:Calibri;mso-fareast-font-family:宋体;
					mso-bidi-font-family:'Times New Roman';font-size:10.5000pt;mso-font-kerning:1.0000pt;">3.<font face="宋体">冒用他人身份或搬运他人图片、文字、视频等作品</font><font face="Calibri">;</font></span><span style="mso-spacerun:'yes';font-family:Calibri;mso-fareast-font-family:宋体;
					mso-bidi-font-family:'Times New Roman';font-size:10.5000pt;mso-font-kerning:1.0000pt;"><o:p></o:p></span></p><p class="MsoNormal" align="justify" style="text-align:justify;text-justify:inter-ideograph;"><span style="mso-spacerun:'yes';font-family:Calibri;mso-fareast-font-family:宋体;
					mso-bidi-font-family:'Times New Roman';font-size:10.5000pt;mso-font-kerning:1.0000pt;">4.<font face="宋体">通过有奖方式诱导他人点赞、评论、收藏、转发等</font><font face="Calibri">;</font></span><span style="mso-spacerun:'yes';font-family:Calibri;mso-fareast-font-family:宋体;
					mso-bidi-font-family:'Times New Roman';font-size:10.5000pt;mso-font-kerning:1.0000pt;"><o:p></o:p></span></p><p class="MsoNormal" align="justify" style="text-align:justify;text-justify:inter-ideograph;"><span style="mso-spacerun:'yes';font-family:Calibri;mso-fareast-font-family:宋体;
					mso-bidi-font-family:'Times New Roman';font-size:10.5000pt;mso-font-kerning:1.0000pt;">5.<font face="宋体">为刻意博取眼球，在标题、封面等处使用夸张表达。</font></span><span style="mso-spacerun:'yes';font-family:Calibri;mso-fareast-font-family:宋体;
					mso-bidi-font-family:'Times New Roman';font-size:10.5000pt;mso-font-kerning:1.0000pt;"><o:p></o:p></span></p></div>
				`,
				showAgree: false,
				imgArr: [],
				realH: '',
				typeList: [{
						name: '景点',
					},
					{
						name: '美食 ',
					},
					{
						name: '住宿',
					}

				],
				typeIndex: null
			}
		},
		onLoad() {
			this.$login().then(res => {
				if (res !== 0) {
					this.$refs['phoneNumber'].show = true;
				}
			})
		},
		methods: {
			initEditor(editor) {
			      this.editorIns = editor // 保存编辑器实例
			      // 保存编辑器实例后，可以在此处获取后端数据，并赋值给编辑器初始化内容
			},
			saveContens(e) {
			    this.dto.content = e.html
			},
			titles(e) {
				console.log(e);
				this.dto.title = e.detail.value
				if (e.detail.value != '') {
					this.$api.detectionContent(e.detail.value).then(result => {
						if (result.code !== 0) return this.$showToast(result.msg);
					})
				}

			},
			// 选择类型
			radioType(item, index) {
				console.log(item, index);
				this.typeIndex = index;
				this.dto.type = index
			},
			// 取消发布
			del() {
				this.dto = {}
				this.agree = false
				this.fileList = []
				this.$showToast("取消成功");
				uni.navigateBack(1)
			},
			// 确定发布
			save() {
				this.dto.realName = JSON.parse(wx.getStorageSync('userInfo')).realName
				this.dto.userId = JSON.parse(wx.getStorageSync('userInfo')).id

				if (!this.dto.object) return this.$showToast("请添图片或视频");
				if (!this.dto.title) return this.$showToast("请填写标题");
				if (!this.dto.content) return this.$showToast("请填写内容");
				this.$api.detectionContent(this.dto.content).then(result => {
					if (result.code !== 0) return this.$showToast(result.msg);
					if (!(this.dto.type != 99)) return this.$showToast("请选择发布类型");
					if (!this.agree) return this.$showToast('请阅读并同意旅游攻略发布规则');

					this.dto.content = encodeURIComponent(this.dto.content)
					this.$api.post('/api/introdution/save', this.dto).then(res => {
						if (res.data.code == 0) {
							this.$showToast("发布成功,待管理员审核");
							this.dto = {}
							this.agree = false
							this.fileList = []

							setTimeout(() => {
								// uni.redirectTo({
								// 	url: '/pages/shengsi/strategy/strategy'
								// })
								uni.navigateBack(1)
							}, 1000);

						} else if (res.data.code == 500) {
							this.$showModal(res.data.msg);
						}
					})
				})
			},

			// 协议
			showXy() {
				this.showAgree = true
			},
			// 已知晓
			confirm() {
				this.agree = true
				this.showAgree = false
			},
			// 副文本
			handleInput(event) {
				var text = event.detail.value;
				this.dto.content = text.replace(/\n/g, '<br>');
				// 这里可以根据需要进行后续处理，比如更新页面的显示内容或发送给服务器等
			},

			// 图片大小超出最大允许大小
			overSize(e) {
				uni.$u.toast('上传图片大小不能超过10MB!')
			},



			// 删除图片
			deletePic(event) {
				this.fileList.splice(event.index, 1)
			},


			// 新增图片
			async afterRead(event) {
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let Lists = [].concat(event.file)
				let fileListLen = this.fileList.length
				Lists.map((item) => {
					this.picList.push(
						item.url,
					)
				})


				for (let i = 0; i < Lists.length; i++) {
					const result = await this.uploadFilePromise(Lists[i].url)
					wx.getImageInfo({
						src: Lists[i].url,
						success: res => {

							let H = res.height
							let W = res.width
							// 计算宽高比  处理后的高度
							//在这计算的单位是px. 在进行渲染的时候要换算成rpx. 
							//230  就是给图片最高度一个限制 最高230 超过230 就给他230  
							//180  就是给图片最低度一个限制 最低180 低于180 就给他180 

							this.realH = Math.floor(173 / (W / H))
							if (this.realH > 230) {
								this.realH = 230
							}
							if (this.realH < 180) {
								this.realH = 180
							}
							let h = this.realH
							this.dto.object.push({
								result,
								h
							})

						}
					})
				}
			},



			//上传图片
			uploadFilePromise(url) {

				return new Promise((resolve, reject) => {


					this.$api.detectionContent(url, 2).then(result => {
						if (result.code === 0) {
							let a = uni.uploadFile({
								//url: this.$common.domain+'/api/common/upload', // 仅为示例，非真实的接口地址
								url: 'https://i.ringzle.com/island-cloud-server/oss/file/aliyunUpload', // 仅为示例，非真实的接口地址
								filePath: url,
								name: 'file',
								header: {
									token: wx.getStorageSync('access_token')
								},
								success: (res) => {
									let data = JSON.parse(res.data) //最终传给的是字符串，这里需要转换格式
									this.fileList.push({
										url: data.data.url
									})
									resolve(data.data.url)
								}
							});
						} else this.$showToast(result.msg)


					})







				})


			},



			// ?access_token=b0f3fa51-2ce0-4141-8c1f-2e90aebaca1


		}
	}
</script>

<style lang="less">
	::v-deep .ydxy .u-popup__content{
		max-height: 80%;
		overflow: auto !important;
		border-radius:32rpx !important;
	}
	.icon-charutupian{
		display: none !important;
	}
	.text-text{
		max-height: 500rpx;
		overflow-y: auto;
	}
	
	.title {
		.input {
			margin: 30rpx 0;
			border-bottom: 0.5rpx solid #EFEFEF;
			padding-bottom: 30rpx;
			font-size: 30rpx !important;
			color: #111 !important;
		}
	}

	.active {
		background-color: #E4F4FF !important;
		color: #007A69 !important;
	}

	.hander-one {
		padding: 20rpx 0 0;

		.title {
			font-size: 30rpx;
			color: #111111;
			margin: 48rpx 0 24rpx;
		}

		.text {
			display: flex;
			width: 654rpx;
			flex-wrap: wrap;
		}
	}


	.address {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin: 40rpx 0;

		.left {
			display: flex;

			image {
				width: 36rpx;
				height: 36rpx;

			}

			text {
				font-size: 28rpx;
				color: #333333;
				margin: 0 16rpx;

			}
		}
	}

	.agree {
		margin-top: 30rpx;
		box-sizing: border-box;
		// margin: 24rpx 36rpx;
		display: flex;
		align-items: center;
		// padding: 51rpx 0 51rpx;

		image {
			width: 32rpx;
			height: 32rpx;
			margin-right: 16rpx;

		}

		text {
			font-size: 26rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #666666;
		}

		text:nth-child(3) {
			color: #007A69;
			margin-left: 10rpx;
		}
	}

	.btn {
		display: flex;

		justify-content: space-between;
		align-items: center;
		text-align: center;
		margin: 60rpx 0;

		.btn-left {
			width: 200rpx;
			height: 88rpx;
			border-radius: 50rpx;
			border: 1rpx solid #CCCCCC;
			font-size: 32rpx;
			color: #999999;
			display: flex;
			justify-content: center;
			line-height: 88rpx;
		}

		.btn-right {
			line-height: 88rpx;
			width: 424rpx;
			height: 88rpx;
			border-radius: 50rpx;
			border: 1rpx;
			background-color: #007A69;
			font-size: 32rpx;
			color: #FFFFFF;
			display: flex;
			justify-content: center;

		}
	}
</style>

<style lang="less">
	// .u-text {
	// 	height: 40vh !important;
	// 	font-size: 28rpx !important;
	// 	color: #111 !important;
	// }

	.page {
		box-sizing: border-box;
		padding: 48rpx 32rpx;
		// height: 100vh;
		width: 100vw;
	}

	.typeList {
		display: flex;

		.list {
			display: flex;

			// .items {
			// 	width: ;
			// }
		}
	}

	.upload {
		// width: 210rpx !important;
		// height: 210rpx !important;

		.upload-image {
			width: 210rpx !important;
			height: 210rpx !important;
			margin: 8rpx !important;
		}
	}

	.u-upload__button {
		width: 210rpx !important;
		height: 210rpx !important;
	}

	.u-upload__wrap__preview__image {
		width: 210rpx !important;
		height: 210rpx !important;
	}

	.u-upload__wrap__preview {
		margin: 8rpx !important;
	}

	.u-textarea {
		padding: 0 !important;
		border: 0 !important;
		border-radius: 0 !important;

	}

	.u-textarea__field {
		// overflow: auto !important;
		min-height: 200rpx !important;
		border-bottom: 0.5rpx solid #EFEFEF !important;
		padding-bottom: 30rpx !important;
		font-size: 28rpx !important;
		color: #111 !important;
		padding-bottom: 20rpx !important;
	}

	.u-icon__icon {
		font-size: 24rpx !important;
		line-height: 24rpx !important;
	}
</style>